<template>
<!--1.利用v-if控制显示隐藏 2.双击事件切换隐藏状态 -->
   <div class="my-tag"  @dblclick='openFn'>
    
    <!-- 输入框最开始隐藏 ,添加自定义指令获取焦点,添加失去焦点事件-->
    <!-- 获取焦点有两种方式1.ref  ref='inp'2.自定义指令 -->
              <input
                class="input"
                type="text"
                placeholder="输入标签"

                v-if='edit' 
                v-focus
                @blur='close'
                v-model="str"
                @keydown.enter='setVal'
                />

              <div class="text" v-else>{{value}}</div>
            </div>
</template>

<script>
export default {
  props:{
    value:String  //父组件的数据通过v-model进行关联子组件
  },
  data(){
    return{
      edit:false,

      str:''//同步自己的数据

    }
  },
  methods:{
    openFn(){
      this.edit=true//让输入框出现
      this.str=this.value//显示时要回显  父传子

      // vue更新dom是异步的 
     /*  this.$nextTick(()=>{
         this.$refs.inp.focus() 
      }) */
    },
    close(){
      this.edit=false
    },
    setVal(){
      this.$emit('input',this.str),//回车时 子传父
      this.edit=false

    }
  },
  // 获取焦点方法二  自定义指令 指令上绑定的元素在插入页面的时候执行
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    }
  }

}
</script>

<style lang='less' scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}

</style>